<template>
	<view>
		<view class="wrapper">
			<view class="welcome">欢迎回来！</view>
			<view class="input-content">
				<view class="input-item">
					<text class="tit">手机号码</text>
					<input type="number" placeholder="请输入手机号码" maxlength="11" />
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input type="mobile" value="" placeholder="8-18位不含特殊字符的数字、字母组合" maxlength="20" password />
				</view>
			</view>
			<button class="confirm-btn">登录</button>
			<view class="forget-section">忘记密码?</view>
		</view>
		<view class="register-section">
			还没有账号?
			<text>马上注册</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	}
};
</script>
<style lang="scss">
.wrapper {
	width: 100%;
	.welcome {
		position: relative;
		left: 50rpx;
		top: -90rpx;
		font-size: 46rpx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
	}
	.input-content {
		padding: 0 60rpx;
		.input-item {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			padding: 0 30rpx;
			background: #f8f6fc;
			height: 120rpx;
			border-radius: 4px;
			margin-bottom: 50rpx;
			.tit {
				height: 50rpx;
				line-height: 56rpx;
				font-size: 26rpx;
				color: #606266;
			}
			input {
				height: 60rpx;
				font-size: 30rpx;
				color: #303133;
				width: 100%;
			}
		}
	}
	.confirm-btn {
		width: 630rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 50px;
		margin-top: 70rpx;
		background: #fa436a;
		color: #fff;
		font-size: 32rpx;
	}
	.forget-section {
		font-size: 26rpx;
		color: #4399fc;
		text-align: center;
		margin-top: 40rpx;
	}
}
.register-section {
	position: absolute;
	left: 0;
	bottom: 50rpx;
	width: 100%;
	font-size: 26rpx;
	color: #606266;
	text-align: center;
	text {
		color: #4399fc;
		margin-left: 10rpx;
	}
}
</style>
